<template>
    <div class="productProNew">
        <div class="title"><h1><span>复制行程</span></h1></div>
        <form name="基本信息" class="basicInfor">

            <h1 class="hide">行程名称(必填)</h1>
            <div class="form-group required">
                <label :for="'strokeName'+$attrs.text">行程名称：</label>
                <input autocomplete="off" type="text" class="form-control proName w50" :id="'strokeName'+$attrs.text" placeholder="" required v-model="journey.title" >
            </div>

            <h1 class="hide">管理员电话(必填)</h1>
            <div class="form-group required">
                <label :for="'phone'+$attrs.text">管理员电话：</label>
                <input autocomplete="off" type="text" class="form-control proName" :id="'phone'+$attrs.text" placeholder="" required v-model="journey.managePhone"> （管理员电话必须是已注册的号码）
            </div>

            <h1 class="hide">出发地（必填）</h1>
            <div class="form-group departure clearfix">
                <label>出发地：</label>
                <Site v-on:DeparTure="deparTure"></Site>
                <p class="site-p">{{startCity}}</p>
            </div>

            <h1 class="hide">目的地</h1>
            <div class="form-group destination clearfix">
                <label>目的地：</label>
                <span class="site-p">{{destiCity}}</span>
            </div>

            <h1 class="hide">出发日期（必填）</h1>
            <div class="form-group required">
                <label :for="'schduleDateStart'+$attrs.text">出发日期：</label>
                <input autocomplete="off" class="form-control ipt-datepicker adultPrice setoff" type="text" :id="'schduleDateStart'+$attrs.text" required placeholder="起始时间" v-model="setoffDate">
            </div>

            <h1 class="hide">游玩天数</h1>
            <div class="form-group clearfix">
                <label :for="'strokeDay'+$attrs.text">游玩天数：</label>
                <span class="site-p">{{journey.coDay}}</span>
            </div>
            <!--<h1 class="hide">预算金额</h1>
            <div class="form-group ">
                <label :for="'budget'+$attrs.text">预算金额：</label>
                <input autocomplete="off" type="text" class="form-control adultPrice" :id="'budget'+$attrs.text" placeholder="" v-model="journey.yusuan">
            </div>-->
            <h1 class="hide">往返航班(必填)</h1>
            <div class="form-group ">
                <label class="destxt" :for="'roundFlights'+$attrs.text">往返航班：</label>
                <textarea class="form-control proDes" :id="'roundFlights'+$attrs.text" rows="6" placeholder="请输入内容" v-model="journey.transportInfo"></textarea>
            </div>

            <h1 class="hide">集合安排(必填)</h1>
            <div class="form-group ">
                <label class="destxt" :for="'setPlan'+$attrs.text">集合安排：</label>
                <textarea class="form-control proDes" :id="'setPlan'+$attrs.text" rows="6" placeholder="请输入内容" v-model="journey.jiheInfo"></textarea>
            </div>

            <h1 class="hide">导游领队(必填)</h1>
            <div class="form-group ">
                <label class="destxt" :for="'tourLeader'+$attrs.text">导游领队：</label>
                <textarea class="form-control proDes" :id="'tourLeader'+$attrs.text" rows="6" placeholder="请输入内容" v-model="journey.talentInfo"></textarea>
            </div>

            <h1 class="hide">紧急电话(必填)</h1>
            <div class="form-group ">
                <label :for="'call'+$attrs.text">紧急电话：</label>
                <input autocomplete="off" type="text" class="form-control proName" :id="'call'+$attrs.text" placeholder=""  v-model="journey.jinjiPhone">
            </div>

            <h1 class="hide">补充说明(必填)</h1>
            <div class="form-group ">
                <label class="destxt" :for="'addDes'+$attrs.text">补充说明：</label>
                <textarea class="form-control proDes" :id="'addDes'+$attrs.text" rows="6" placeholder="请输入内容" v-model="journey.remark"></textarea>
            </div>

            <button type="button" class="btn btn-info confirmBtn" @click="submitPro()">确定</button>
        </form>
    </div>
</template>
<script>
    import Site from '@/components/public/site'
    export default{
        data(){
            return{
                Http:'',// 接口
                acquireHttp:'', //获取行程接口
                setoffDate:'',//出发日期
                startCity:'',
                destiCity:'',
                journey:{//
                    supplierPhone:'', //供应商电话
                    title:'',//标题
                    managePhone:'', //管理员电话
                    startCity:'',//出发城市
                    startPath:'',//出发城市路径
                    destiCity:'',//目标城市
                    destiPath:'',//目标城市路径
                    startDate:'',//出发日期
                    coDay:'',//天数
                    // yusuan:'',//预算金额
                    transportInfo:'',//往返航班
                    jiheInfo:'',//集合安排
                    talentInfo:'',//导游领队
                    jinjiPhone:'',//紧急电话
                    remark:'',//补充说明
                }
            }
        },
        computed:{
            wbXchBaseCopy(){ //提交行程
                return this.$store.state.interface.wbXchBaseCopy;
            },
            wbXchBaseDetailData(){ //获取行程
                return this.$store.state.interface.wbXchBaseDetailData;
            },
            AreaList(){ // 地区
                return this.$store.state.interface.areaList;
            },
        },
        components:{
            Site
        },
        methods:{
            colorChange(event){
                event.target.style.color = '#7f889c';
            },
            // 出发
            deparTure: function(msg,path,fill){
                var self = this;
                self.journey.startCity=msg;
                self.journey.startPath=path;
                self.$ajax.post(self.AreaList+'?path='+path).then(function(res){
                    var areaList= res.data.result;
                    var arealistZhou;
                    for(var i in areaList){
                        arealistZhou = areaList[i];
                    };
                    self.startCity=arealistZhou[0].sitePath;
                    if(fill==0){
                        self.startCity=self.startCity+msg+','
                    }
                });
            },
            // 目标
            desTination: function(msg,path){
                this.journey.destiCity=msg;
                this.journey.destiPath=path;
            },
            ContactPhone(item,event){ //判断手机正确格式
                var pattern = /^1[35789]\\d{9}$/;
                if(item.replace(/(^s*)|(s*$)/g, "") == 0){
                    event.target.value='';
                    return;
                }else if(!pattern.test(item)){
                    layer.msg('请填写正确的手机号');
                }
            },
            submitPro(){ //提交判断是否信息完整
                var self = this;
                var Value;
                $('.basicInfor .required input:required,.basicInfor .required textarea:required,.basicInfor .required select:required').each(function(){
                    if(this.value == ''){
                        Value = false;
                        return
                    }else{
                    }
                });

                if(Value==false){
                    layer.msg('请把信息填写完整');
                }else if(self.journey.startCity == ''){
                    layer.msg('请选择出发地！');
                }else if(self.journey.destiCity == ''){
                    layer.msg('请选择目的地！');
                }else if(self.journey.startDate == undefined || self.journey.startDate ==''){
                    layer.msg('请选择出发日期！');
                }else{
                    self.SubmitPro();
                }

            },
            SubmitPro(){
                var self = this;
                event.preventDefault();  
                layer.load(2);
                var formData =new FormData(); // 基础信息表单数据
                    formData.append('xid', this.journey.xid);
                    formData.append('title', this.journey.title);
                    formData.append('managePhone', this.journey.managePhone);
                    formData.append('startCity', this.journey.startCity);
                    formData.append('startPath', this.journey.startPath);
                    // formData.append('destiCity', this.journey.destiCity);
                    // formData.append('destiPath', this.journey.destiPath);
                    formData.append('startDate', this.journey.startDate);
                    // formData.append('coDay', this.journey.coDay);
                    // formData.append('yusuan', 0);
                    formData.append('transportInfo', this.journey.transportInfo);
                    formData.append('jiheInfo', this.journey.jiheInfo);
                    formData.append('talentInfo', this.journey.talentInfo);
                    formData.append('jinjiPhone', this.journey.jinjiPhone);
                    formData.append('remark', this.journey.remark);
                    formData.append('app', 'liexing');
                    formData.append('platform', 'web');
                    formData.append('ver', 3);
                this.$ajax.post(self.Http,formData).then(function(res) {
                    layer.closeAll('loading');
                    if(res.data.code == '10000' ){
                        var id=res.data.result.Delete.id;
                        layer.msg('新建成功！');
                        // 跳转的日程安排
                        self.$store.commit('NEW_STROKE_TAB',{
                            title:'日程安排',
                            components:'strokeProSchedule',
                            dataId:id,// ID
                        });
                        return;
                    }else if(res.data.code == '14013' ){
                        layer.msg('新建失败,供应商电话为未注册号码!');
                    }else{
                        layer.msg('新建失败! '+ res.data.message);
                    }
                },function(res) {
                    layer.closeAll('loading');
                    layer.msg('服务器错误!');
                });
            },
        },
        beforeMount(){
            //
            var self = this;
            var url = this.wbXchBaseCopy;
            var sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
            this.Http = url+'?sid='+sessionId; // 基础信息
            this.acquireHttp=this.wbXchBaseDetailData+'?sid='+sessionId; // 获取行程
            var arealistUrl=this.AreaList+'?sid='+sessionId; // 地址

            layer.load(2);
            var formData =new FormData(); // 基础信息表单数据
                formData.append('xid', self.$attrs.proid);
                formData.append('app', 'liexing');
                formData.append('platform', 'web');
                formData.append('ver', 3);

            this.$ajax.post(self.acquireHttp,formData).then(function(res) {
                layer.closeAll('loading');
                if(res.data.code == '10000' ){
                    self.journey=res.data.result.XchBaseDetailData;
                    // var StartDate=self.journey.startDate;
                    // self.setoffDate=self.shijian(StartDate);
                    // 出发地
                    self.$ajax.post(arealistUrl+'&path='+self.journey.startPath).then(function(res3){
                        var areaList= res3.data.result;
                        var arealistZhou;
                        for(var i in areaList){
                            arealistZhou = areaList[i];
                        };
                        self.startCity=arealistZhou[0].sitePath;
                        if(self.startCity.indexOf(self.journey.startCity)<0){
                            self.startCity=self.startCity+self.journey.startCity+','
                        }
                    });
                    // 目的地
                    self.$ajax.post(arealistUrl+'&path='+self.journey.destiPath).then(function(res4){
                        var areaList= res4.data.result;
                        var arealistZhou;
                        for(var i in areaList){
                            arealistZhou = areaList[i];
                        };
                        self.destiCity=arealistZhou[0].sitePath;
                        if(self.destiCity.indexOf(self.journey.destiCity)<0){
                            self.destiCity=self.destiCity+self.journey.destiCity+','
                        }
                    });
                }else{
                    layer.msg('数据获取失败!');
                }
            },function(res) {
                layer.closeAll('loading');
                layer.msg('服务器错误!');
            });
        },
        mounted(){
            var self = this;
            // 出发日期
            $("#schduleDateStart"+this.$attrs.text).datepicker({
                showAnim: 'fadeIn',
                minDate: '-1y',
                maxDate: "+1y",
                defaultDate : +1,
                duration : 'fast',
                firstDay : 1 ,
                nextText : '下一月',
                prevText : '上一月',
                showButtonPanel: true,
                currentText : '今天',
                gotoCurrent : false,
                onSelect: function (dateText, inst) {
                    // self.start = Number(dateText.split('-').join(''));//将字符串转换为number
                    self.setoffDate = dateText;
                    self.journey.startDate= Date.UTC(inst.currentYear, inst.currentMonth, inst.currentDay);
                },
            });
        }
    }
</script>
<style lang="scss" scoped>
  .form-control.proDes, .form-control.proName{width: 50%}
</style>
